
<template>
  <div>
    <el-container class="contianer">

      <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        :collapse="isCollapse">
        <el-menu-item index="0">

          <img v-if="!isCollapse" src="../../assets/logo.svg" @click="opemMenu" style="height: 38px;">
          <img v-else src="../../assets/logo.svg" @click="opemMenu" style="height: 25px;">
          <span slot="title" style="text-align: center;font-family:'PingFang SC';">&nbsp;&nbsp;&nbsp;围群管理</span>
        </el-menu-item>

        <el-menu-item index="1" @click="toIndex()">
          <i class="el-icon-menu" @click="toIndex()"></i>
          <span slot="title" @click="toIndex()">首页</span>
        </el-menu-item>
        <!-- <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-reading"></i>
            <span slot="title">博客</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="toArticle()"><i class="el-icon-tickets"></i>文章管理</el-menu-item>
            <el-menu-item index="1-2" @click="toNodeList()"><i class="el-icon-edit"></i>笔记管理</el-menu-item>
            <el-menu-item index="1-3" @click="toProjectAdmin()"><i class="el-icon-coin"></i>项目管理</el-menu-item>
            <el-menu-item index="1-4" @click="toCodeAdmin()"><i class="el-icon-cpu"></i>源码管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu> -->

        <el-menu-item index="3" @click="toUserAdmin()" v-if="userMess.userType == 1" >
          <i class="el-icon-user" @click="toUserAdmin()"></i>
          <span slot="title" @click="toUserAdmin()">用户管理</span>
        </el-menu-item>

        <el-menu-item index="4" @click="toCommunity()">
          <i class="el-icon-chat-dot-round" @click="toCommunity()"></i>
          <span slot="title" @click="toCommunity()">围群社区</span>
        </el-menu-item>


        <el-menu-item index="5" @click="toAboutAdmin()">
          <i class="el-icon-thumb" @click="toAboutAdmin()"></i>
          <span slot="title" @click="toAboutAdmin()">关于围群</span>
        </el-menu-item>
        <el-menu-item index="6" disabled>
          <i class="el-icon-loading"></i>
          <span slot="title">正在开发...</span>
        </el-menu-item>
      </el-menu>


      <el-container>
        <el-header style="text-align: right; font-size: 12px;background-color:#85d9d8">
          <el-dropdown trigger="click" class="userDropdown">
            <span class="el-dropdown-link">
              <div class="userHeadimg"><el-avatar shape="square" :size="40"
                  :src="userMess.avatar ? userMess.avatar : circleUrl"></el-avatar></div>
              <div class="userName">{{ userMess.nickName }}<i class="el-icon-arrow-down el-icon--right"></i></div>
            </span>
            <el-dropdown-menu slot="dropdown" style="background-color: #ebe8e8;">
              <el-dropdown-item @click.native="baseMess"><i class="el-icon-edit-outline"></i>&nbsp;基本信息</el-dropdown-item>
              <el-dropdown-item @click.native="changePassBtn"><i class="el-icon-key"></i>&nbsp;密码修改</el-dropdown-item>
              <el-dropdown-item @click.native="loginOut"><i
                  class="el-icon-switch-button"></i>&nbsp;退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main style="height: 1000px" class="main">
          <el-backtop target=".main" :visibility-height="100"></el-backtop>
          <!-- 页面主题部分，路由出口 -->
          <!-- <router-view /> -->
          <transition name="fade" mode="out-in">
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
          </transition>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </el-main>


      </el-container>


      <el-dialog :visible.sync="isChangePass ? true : changePass" :width="'800px'" :height="'400px'">
        <div slot="title" class="header-title">
          <span class="title-name">
            <i class="el-icon-edit" style="margin-right:10px"></i>
          </span>
          <span class="title-age">密码修改</span>
        </div>
        <div class="changePass">

          <el-steps :active="active" finish-status="success">
            <el-step title="身份验证"></el-step>
            <el-step title="新密码"></el-step>
            <el-step title="修改成功"></el-step>
          </el-steps>
          <div class="changePassMiddle">
            <div class="changePassCode" v-if="active == 0">
              <!-- <el-input placeholder="请输入手机号" v-model="smsCode.phone" maxlength="10" show-word-limit clearable></el-input> -->
              <el-input v-model="smsCode.sms" placeholder="验证码" style="width: 60%;top:30px;"></el-input>&nbsp;

              <el-button type="primary" :disabled="disable" :class="{ codeGeting: isGeting }"
                style="position:absolute;width: 32%;top:60px;" @click="getVerifyCode">{{ getCode }}</el-button>
              <div style="position:absolute;width: 100%;top:130px;color:rgb(230, 162, 60)" v-show="sendCode"><i
                  class="el-icon-warning"></i>&nbsp;验证码已发送，一分钟内有效，请注意查收!</div>
            </div>
            <div class="outNewPass" v-if="active == 1">
              <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="密码" prop="pass">
                  <el-input type="password" v-model="ruleForm.pass" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                  <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" clearable></el-input>
                </el-form-item>
              </el-form>
              <div style="position:absolute;width: 100%;top:150px;color:rgb(230, 162, 60)"><i
                  class="el-icon-warning"></i>&nbsp;由于修改密码需要管理员手机号，为了简化操作，已经跳过验证，若不小心回退到身份验证即可</div>
            </div>

            <div class="succesChangePass" v-if="active == 2" style="position: absolute;top:0px;left:20px">
              <el-result icon="warning" title="密码修改失败" subTitle="将检查网络后重新进行密码修改">
              </el-result>
            </div>
            <div class="succesChangePass" v-if="active == 3" style="position: absolute;top:0px;left:20px">
              <el-result icon="success" title="密码修改成功" :subTitle="subTitle ? subTitle : '请重新登录, 5 秒钟之后自动退出登录...'">
              </el-result>
            </div>
          </div>
          <div class="changePassBotton">
            <el-button type="info" style="margin-top: 12px;" @click="active--" v-if="active == 1 || active == 2"><i
                class="el-icon-arrow-left"></i>退回</el-button>
            <el-button type="danger" plain style="margin-top: 12px;" @click="next" v-if="active == 0"
              :disabled="!sendCode">下一步<i class="el-icon-arrow-right"></i></el-button>
            <el-button type="danger" plain style="margin-top: 12px;" @click="nextChangePass" v-if="active == 1"
              :disabled="sendCode">下一步<i class="el-icon-arrow-right"></i></el-button>
          </div>
        </div>
      </el-dialog>

    </el-container>
  </div>
</template>



<script>
export default {
  name: 'index',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      sendCode: false,//验证是否已经发送
      codeSuccess: false,//验证码验证成功
      isChangePass: false,
      isCollapse: true,
      userMess: {//用户信息
        phone: ''
      },
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      changePass: false,
      active: 1,
      smsCode: {//密码修改短信验证
        phone: '',
        sms: '',
      },
      getCode: '获取验证码',
      isGeting: false,//60秒内重新获取验证码
      count: 60,
      disable: false,
      ruleForm: {//重新输入密码
        pass: '',
        checkPass: '',
      },
      rules: {//两次输入密码的规则
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      subTitle: '',


    };
  },
  created() {
    this.isLogin();
  },
  methods: {
    nextChangePass() {//进行密码修改
      if (this.ruleForm.pass == "" || this.ruleForm.pass !== this.ruleForm.checkPass) {
        this.$message({
          message: '检查密码输入',
          type: 'error',
        })
        return;
      }
      this.userMess.pass = this.ruleForm.pass;
      this.$axios.post("api/wqunAccountController/changeAccountPhone", this.userMess).then((res) => {
        if (res.data.success) {
          this.isChangePass = true;
          this.active = this.active + 2;
          var n = 5;
          var countDown = setInterval(() => {
            this.subTitle = "请重新登录, " + n + " 秒钟之后自动退出登录..."
            if (n < 0) {
              this.loginOut();
              clearInterval(countDown);
            }
            n--;
          }, 1000);


        } else {
          this.$message({
            message: res.data.message,
            type: 'error',
          });
          this.active++;
        }
      })
    },
    getVerifyCode() {//获取验证码
      this.$axios.get("api/loginservice/sms/sendLoginSms/" + this.userMess.phone).then((res) => {
        this.$message({
          message: res.data.message,
          type: res.data.success ? 'success' : 'error',
        })
        if (res.data.success) {
          this.sendCode = true;

          var countDown = setInterval(() => {
            if (this.count < 1) {
              this.isGeting = false;
              this.disable = false;
              this.getCode = '获取验证码';
              this.count = 60;
              clearInterval(countDown);
            } else {
              this.isGeting = true;
              this.disable = true;
              this.getCode = this.count-- + 's后重发';
            }
          }, 1000);
        }
      });


    },
    next() {//跳转到修改修改密码阶段
      this.$axios.post("api/wqunAccountController/changePassCode", { phone: this.userMess.phone, sms: this.smsCode.sms }).then((res) => {

        if (res.data.success) {
          this.active++;
        } else {
          this.$message({
            message: res.data.message,
            type: 'error',
          })
        }
      })

    },
    changePassBtn() {
      this.changePass = true;
    },
    baseMess() {
      this.$router.push({
        name: 'baseMess',
      })
    },
    isLogin() {
      //JSON.parse(sessionStorage.getItem("userMess"))
      //console.log(this.userMess.phone);
      if (sessionStorage.getItem("userMess") == null) {
        this.$message({
          type: 'warning',
          message: '尚未登录，请登录'
        })
        this.$router.push({
          name: 'login'
        })
      } else {
        this.userMess = JSON.parse(sessionStorage.getItem("userMess"));
      }
    },
    handleOpen(key, keyPath) {
      //console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    },
    opemMenu() {
      this.isCollapse = !this.isCollapse
    },
    toIndex() {
      this.$router.push({
        name: 'index',
      })
    },
    toArticle() {
      this.$router.push({
        name: 'articleAdmin',
      })
    },
    toNodeList() {
      this.$router.push({
        name: 'nodeList',
      })
    },
    toCodeAdmin() {
      this.$router.push({
        name: 'codeAdmin',
      })
    },
    toProjectAdmin() {
      this.$router.push({
        name: 'projectAdmin',
      })
    },
    toAboutAdmin() {
      this.$router.push({
        name: 'aboutAdmin',
      })
    },
    toUserAdmin() {
      this.$router.push({
        name: 'userAdmin',
      })
    },
    toCommunity() {
      if (this.userMess.userType == 0) {
        this.$router.push({
          name: 'community',
        })
      }else if(this.userMess.userType == 1){
        this.$router.push({
          name: 'communityAdmin',
        })
      }

    },

    //退出登录
    loginOut() {
      sessionStorage.clear();
      this.$message({
        message: "已退出登录，感谢使用围群系统",
        type: 'success'
      })
      this.$router.push({
        name: 'login',
      })
    }
  }
}
</script>

<style scoped>
.contianer {
  height: 95vh;
  border: 1px solid #eee;
}

.changePassMiddle {

  width: 300px;
  height: 100px;
  position: absolute;
  bottom: 180px;
  left: 28%;
  padding: 30px;
}

.changePassBotton {
  position: absolute;
  bottom: 100px;
  right: 10%;
}

.changePass {
  height: 350px;
  padding: 50px;
  padding-top: 20px;
}

.userHeadimg {
  display: inline-block;
}

.userName {
  margin: 10px;
  position: relative;
  bottom: 13px;
  display: inline-block;
}

.el-dropdown-link {
  text-align: center;
  user-select: none;
}

.el-dropdown-link:i {
  top: 10px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;

}

.userDropdown {
  position: relative;
  top: 0px;
  margin: 10px;
}
</style>